<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">房屋信息编辑</div>
                <div>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle" style="margin-bottom: 20px;">房屋信息</div>
            <div class="detailcontent">
                <div class="detailitem1">{{ projectdetail.fwdz }}</div>
                <div class="detailitem">产权单位：{{ projectdetail.cqdw }}</div>
                <div class="detailitem">管房单位：{{ projectdetail.gfdw }}</div>
                <div class="detailitem">产别：{{ projectdetail.cb }}</div>
                <div class="detailitem">权证类型：{{ projectdetail.qzlx }}</div>
                <div class="detailitem">建筑面积：{{ projectdetail.jzmj }}</div>
                <div class="detailitem">房屋性质：{{ projectdetail.fwyt }}</div>
                <div class="detailitem">总层数：{{ projectdetail.zlc }}</div>
                <div class="detailitem">建筑年代：{{ projectdetail.jznd }}</div>
                <div class="detailitem">土地使用权类型：{{ projectdetail.tdsyqlx }}</div>
            </div>
            <div class="addtitle">房屋状态编辑</div>
            <el-form ref="form" :model="form" label-width="auto" :inline="true" label-position="top">
                <el-form-item label="房屋状态:" style="width: 30%" prop="fwzt">
                    <el-select v-model="form.fwzt" placeholder="请选择房屋状态" clearable style="width: 100%"
                        @change="getzt($event)">
                        <el-option v-for="(item, index) in fwztlist" :key="index" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-collapse v-model="activeName" @change="handleChange">
                <el-collapse-item name="1">
                    <template slot="title">
                        <span style="font-weight: 700;font-size: 16px;color: #008A94;">招租中</span>
                    </template>
                    <div
                        style="margin-left: 20px;padding:10px;border: 2px solid rgb(240 240 240);box-sizing: border-box;border-radius: 4px;">
                        <el-form ref="form" :model="form" label-width="auto" :inline="true" label-position="top"
                            style="margin-left: 20px;">
                            <el-form-item label="评估价格:" style="width: 30%" prop="pgjg">
                                <el-input v-model="form.pgjg" placeholder="请输入评估价格" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="评估时间:" style="width: 30%" prop="pgsj">
                                <el-date-picker type="date" placeholder="选择评估时间" v-model="form.pgsj" style="width: 100%"
                                    value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="备注:" style="width: 100%" prop="kzbz">
                                <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入备注" v-model="form.kzbz"
                                    style="width: 100%;">
                                </el-input>
                            </el-form-item>
                            <!-- fja -->
                            <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fja') }"
                                :before-remove="beforeRemoves" multiple
                                :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fja')"
                                :headers="myHeaders" :file-list="filefileList">
                                <div class="unloadTitle">评估报告</div>
                                <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                            </el-upload>
                            <div style="display: flex; margin-top: 20px">
                                <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                    v-for="(item, index) in fjaList" :key="index" class="filebox">
                                    <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                        @click="downloadfile(item.id, item.name, item.suffix)" />
                                    <div class="fileboxitem">{{ item.name }}</div>
                                    <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjaList')"></div>
                                </div>
                            </div>
                        </el-form>
                    </div>
                </el-collapse-item>
                <el-collapse-item name="2">
                    <template slot="title">
                        <span style="font-weight: 700;font-size: 16px;color: #008A94;">招租</span>
                    </template>
                    <div
                        style="margin-left: 20px;padding:10px;border: 2px solid rgb(240 240 240);box-sizing: border-box;border-radius: 4px;">
                        <el-form ref="form" :model="form" label-width="auto" :inline="true" label-position="top"
                            style="margin-left: 20px;">
                            <el-form-item label="预计租赁时间:" style="width: 30%" prop="yjzlsj">
                                <el-date-picker type="date" placeholder="选择预计租赁时间" v-model="form.yjzlsj" style="width: 100%"
                                    value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="租金:" style="width: 30%" prop="zj">
                                <el-input v-model="form.zj" placeholder="请输入租金" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="分成比例:" style="width: 30%" prop="fcbl">
                                <el-input v-model="form.fcbl" placeholder="请输入分成比例" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="分成金额:" style="width: 30%" prop="fcje">
                                <el-input v-model="form.fcje" placeholder="请输入分成金额" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="租期:" style="width: 30%" prop="zq">
                                <el-input v-model="form.zq" placeholder="请输入租期" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="备注:" style="width: 100%" prop="zzbz">
                                <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入备注" v-model="form.zzbz"
                                    style="width: 100%;">
                                </el-input>
                            </el-form-item>
                            <!-- fjb -->
                            <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjb') }"
                                :before-remove="beforeRemoves" multiple
                                :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjb')"
                                :headers="myHeaders" :file-list="filefileList">
                                <div class="unloadTitle">招租方案电子版<span style="color: red;">(盖章)</span></div>
                                <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                            </el-upload>
                            <div style="display: flex; margin-top: 20px">
                                <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                    v-for="(item, index) in fjbList" :key="index" class="filebox">
                                    <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                        @click="downloadfile(item.id, item.name, item.suffix)" />
                                    <div class="fileboxitem">{{ item.name }}</div>
                                    <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjbList')"></div>
                                </div>
                            </div>
                        </el-form>
                    </div>
                </el-collapse-item>
                <el-collapse-item name="3">
                    <template slot="title">
                        <span style="font-weight: 700;font-size: 16px;color: #008A94;">出租</span>
                    </template>
                    <div
                        style="margin-left: 20px;padding:10px;border: 2px solid rgb(240 240 240);box-sizing: border-box;border-radius: 4px;">
                        <el-form ref="form" :model="form" label-width="auto" :inline="true" label-position="top"
                            style="margin-left: 20px;">
                            <el-form-item label="承租人:" style="width: 30%" prop="czr">
                                <el-input v-model="form.czr" placeholder="请输入承租人" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="租期(起始时间):" style="width: 30%" prop="zqqssj">
                                <el-date-picker type="date" placeholder="选择租期(开始时间)" v-model="form.zqqssj"
                                    style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="租期(终止时间):" style="width: 30%" prop="zqzzsj">
                                <el-date-picker type="date" placeholder="选择租期(开始时间)" v-model="form.zqzzsj"
                                    style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="租金(单价):" style="width: 30%" prop="zjdj">
                                <el-input v-model="form.zjdj" placeholder="请输入租金(单价)" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="租金(年租):" style="width: 30%" prop="zjnz">
                                <el-input v-model="form.zjnz" placeholder="请输入租金(年租)" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="租金收取方式:" style="width: 30%" prop="zjsqfs">
                                <el-input v-model="form.zjsqfs" placeholder="请输入租金收取方式" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="承租用途:" style="width: 30%" prop="czyt">
                                <el-input v-model="form.czyt" placeholder="请输入承租用途" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="签约时间:" style="width: 30%" prop="qysj">
                                <el-date-picker type="date" placeholder="选择签约时间" v-model="form.qysj" style="width: 100%"
                                    value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <!-- <el-form-item label="押金金额:" style="width: 30%" prop="yjje">
                                <el-input v-model="form.yjje" placeholder="请输入押金金额" class="search-input"></el-input>
                            </el-form-item> -->
                            <el-form-item label="减免金额:" style="width: 30%" prop="jmje">
                                <el-input v-model="form.jmje" placeholder="请输入减免金额" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="减免(起始时间):" style="width: 30%" prop="jmqssj">
                                <el-date-picker type="date" placeholder="选择减免(开始时间)" v-model="form.jmqssj"
                                    style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="减免(终止时间):" style="width: 30%" prop="jmzzsj">
                                <el-date-picker type="date" placeholder="选择减免(开始时间)" v-model="form.jmzzsj"
                                    style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="中心分成比例:" style="width: 30%" prop="zxfcbl">
                                <el-input v-model="form.zxfcbl" placeholder="请输入中心分成比例" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="年分成金额:" style="width: 30%" prop="nfcje">
                                <el-input v-model="form.nfcje" placeholder="请输入年分成金额" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="装修金额:" style="width: 30%" prop="zxje">
                                <el-input v-model="form.zxje" placeholder="请输入装修金额" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="免租(起始时间):" style="width: 30%" prop="mzqssj">
                                <el-date-picker type="date" placeholder="选择免租(起始时间)" v-model="form.mzqssj"
                                    style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="免租(终止时间):" style="width: 30%" prop="mzzzsj">
                                <el-date-picker type="date" placeholder="选择免租(开始时间)" v-model="form.mzzzsj"
                                    style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="是否涉诉:" style="width: 30%" prop="sfss">
                                <el-select v-model="form.sfss" placeholder="请选择是否涉诉" style="width: 100%">
                                    <el-option v-for="item in sflist" :key="item.code" :label="item.name"
                                        :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="特殊要求:" style="width: 100%" prop="tsyq">
                                <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入特殊要求"
                                    v-model="form.tsyq">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="其他说明:" style="width: 100%" prop="qtsm">
                                <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入其他说明"
                                    v-model="form.qtsm">
                                </el-input>
                            </el-form-item>
                            <!-- fjc -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    公司审批文件(纪要)</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjc') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjc')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjcList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjcList')"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- fjd -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    法审文件</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjd') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjd')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjdList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjdList')"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- fje -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    租赁合同</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fje') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fje')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjeList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjeList')"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- fjf -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    承租营业执证</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjf') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjf')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjfList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjfList')"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- fjg -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    法人证书</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjg') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjg')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjgList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjgList')"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- fjh -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    法人身份证</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjh') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjh')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjhList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjhList')"></div>
                                    </div>
                                </div>
                            </div>
                        </el-form>
                    </div>
                </el-collapse-item>
                <el-collapse-item name="4">
                    <template slot="title">
                        <span style="font-weight: 700;font-size: 16px;color: #008A94;">运营</span>
                    </template>
                    <div
                        style="margin-left: 20px;padding:10px;border: 2px solid rgb(240 240 240);box-sizing: border-box;border-radius: 4px;">
                        <el-form ref="form" :model="form" label-width="auto" :inline="true" label-position="top"
                            style="margin-left: 20px;">
                            <el-form-item label="已收:" style="width: 30%" prop="ys">
                                <el-input v-model="form.ys" placeholder="请输入已收" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="修缮费支出:" style="width: 30%" prop="xsfzc">
                                <el-input v-model="form.xsfzc" placeholder="请输入修缮费支出" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="修缮情况:" style="width: 30%" prop="xsqk">
                                <el-input v-model="form.xsqk" placeholder="请输入修缮情况" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="纠纷情况:" style="width: 30%" prop="jfqk">
                                <el-input v-model="form.jfqk" placeholder="请输入纠纷情况" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="诉讼情况:" style="width: 30%" prop="ssqk">
                                <el-input v-model="form.ssqk" placeholder="请输入诉讼情况" class="search-input"></el-input>
                            </el-form-item>
                            <el-form-item label="租金未按时缴纳原因:" style="width: 100%" prop="zzyy">
                                <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入租金未按时缴纳原因"
                                    v-model="form.zzyy" style="width: 100%;">
                                </el-input>
                            </el-form-item>
                            <!-- fji -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    租金收缴计划表</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fji') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fji')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjiList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjiList')"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- fjj -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    运营情况表</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjj') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjj')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjjList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjjList')"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- fjk -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    委托运营房产情况表</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjk') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjk')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjkList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjkList')"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- fjl -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    租金收入明细对账表</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjl') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjl')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjlList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjlList')"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- fjm -->
                            <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                                <div
                                    style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                                    其他</div>
                                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                    :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'fjm') }"
                                    :before-remove="beforeRemoves" multiple
                                    :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'fjm')"
                                    :headers="myHeaders" :file-list="filefileList">
                                    <div class="unloadTitle"></div>
                                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                </el-upload>
                                <div style="display: flex; margin-top: 20px">
                                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                                        v-for="(item, index) in fjmList" :key="index" class="filebox">
                                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                            @click="downloadfile(item.id, item.name, item.suffix)" />
                                        <div class="fileboxitem">{{ item.name }}</div>
                                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'fjmList')"></div>
                                    </div>
                                </div>
                            </div>

                        </el-form>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>
<script>
import { builddetail, stdwupdate, download, stdwdetails } from '@/api/index';
import global from '@/components/common/httpurl.vue'
import valueList from '@/components/common/valueList.vue'
export default {
    name: 'stdwedit',
    data() {
        return {
            // activeNames: ['1'],
            activeName: '',
            httpUrl: global.httpUrl,//公共地址
            glfslist: valueList.glfslist,//管理方式
            sflist: valueList.sflist,//是否列表
            fwztlist: valueList.fwztlist,//房屋状态列表
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            form: {
                buildid: "",//楼栋ID
                create_name: "",
                create_name_id: "",
                create_time: "",
                current: 0,
                czr: "",//承租人
                czyt: "",//承租用途
                fcbl: "",//分成比例
                fcje: "",//分成金额
                fja: "",
                fjb: "",
                fjc: "",
                fjd: "",
                fje: "",
                fjf: "",
                fjg: "",
                fjh: "",
                fji: "",
                fjj: "",
                fjk: "",
                fjl: "",
                fjm: "",
                fwzt: "",//房屋状态
                id: "",
                jfqk: "",//纠纷情况
                jmje: "",//减免金额 
                jmqssj: "",//减免起始时间
                jmzzsj: "",//减免终止时间 
                kzbz: "",//备注
                mzqssj: "",//免租起始时间
                mzzzsj: "",//免租终止时间
                nfcje: "",//年分成金额 
                pageSize: 0,
                pgjg: "",//评估价格
                pgsj: "",//评估时间
                qtsm: "",//其他说明
                qysj: "",//签约时间
                sfss: "",//是否涉诉
                ssqk: "",//诉讼情况 
                status_code: 1,
                tsyq: "",//特殊要求
                update_name: "",
                update_name_id: "",
                update_time: "",
                xsfzc: "",//修缮费支出
                xsqk: "",//修缮情况
                yjje: "",//押金金额
                yjzlsj: "",//预计租赁时间
                ys: "",//已收
                zj: "",//租金
                zjdj: "",//租金单价 
                zjnz: "",//租金年租
                zjsqfs: "",//租金收取方式
                zq: "",//租期 
                zqqssj: "",//租期起始时间
                zqzzsj: "",//租期终止时间
                zxfcbl: "",//中心分成比例
                zxje: "",//装修金额
                zzbz: "",//备注
                zzyy: "",//租金未按时缴纳原因
                wtdwid:this.$store.getters.company
            },
            fileList: [],
            fjaList: [],
            fjbList: [],
            fjcList: [],
            fjdList: [],
            fjeList: [],
            fjfList: [],
            fjgList: [],
            fjhList: [],
            fjiList: [],
            fjjList: [],
            fjkList: [],
            fjlList: [],
            fjmList: [],
            fja: '',
            fjb: '',
            fjc: '',
            fjd: '',
            fje: '',
            fjf: '',
            fjg: '',
            fjh: '',
            fji: '',
            fjj: '',
            fjk: '',
            fjl: '',
            fjm: '',
            projectdetail: {},
        };
    },
    methods: {
        // 点击展开折叠功能
        getzt(e) {
            console.log(e)
            if (e == '招租中') {
                this.activeName = '1'
            } else if (e == '招租') {
                this.activeName = '2'
            } else if (e == '出租') {
                this.activeName = '3'
            } else if (e == '运营') {
                this.activeName = '4'
            }
        },
        // 折叠功能
        handleChange(val) {
            console.log(val);
        },
        // 创建
        submitForm() {
            var that = this
            // this[zumlist[i]+'List'] 对应的是已有文件列表 that[zumlist[i]]新传的文件列表
            var zumlist = ['fja', 'fjb', 'fjc', 'fjd', 'fje', 'fjf', 'fjg', 'fjh', 'fji', 'fjj', 'fjk', 'fjl', 'fjm']
            for (var i = 0; i < zumlist.length; i++) {
                if (this[zumlist[i]+'List']) {
                    if (this[zumlist[i]+'List'].length != 0) {
                        let a = this[zumlist[i]+'List'].map(res => {
                            return res.id;
                        })
                        console.log(a)
                        if (that[zumlist[i]]) {
                            that.form[zumlist[i]] = a.toString() + ',' + that[zumlist[i]]
                            console.log('文件',that.form[zumlist[i]])
                        } else {
                            that.form[zumlist[i]] = a.toString()
                        }
                    }else{
                        that.form[zumlist[i]] = that[zumlist[i]]
                    }
                } else {
                    that.form[zumlist[i]] = that[zumlist[i]]
                }
            }
            console.log(that.form)
            stdwupdate(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('修改成功');
                    this.$router.go(-1);
                } else {
                    this.$message.error('修改失败');
                }
            });
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList, filetype) {
            console.log(fileList)
            console.log('filetype', filetype)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this[filetype] = this.fileListshandle.toString()

        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists, filetype) {
            console.log(fileLists)
            console.log('filetype', filetype)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this[filetype] = this.fileListshandle.toString()
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        },
        // 删除已有文件
        deletefile(index,listform) {
            this.$confirm('确定删该文件吗？')
                .then(() => {
                    this[listform].splice(index, 1)
                    this.$message.success('删除成功');
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 委托运营详情
        stdwdetails(data) {
            stdwdetails(data).then((res) => {
                this.form = res.data;
                this.fjaList = res.data.fja;
                this.fjbList = res.data.fjb;
                this.fjcList = res.data.fjc;
                this.fjdList = res.data.fjd;
                this.fjeList = res.data.fje;
                this.fjfList = res.data.fjf;
                this.fjgList = res.data.fjg;
                this.fjhList = res.data.fjh;
                this.fjiList = res.data.fji;
                this.fjjList = res.data.fjj;
                this.fjkList = res.data.fjk;
                this.fjlList = res.data.fjl;
                this.fjmList = res.data.fjm;
            });
        },
        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
            });
        },
    },
    created() {
        console.log('params', this.$route.params)
        let stdawdetail = {
            id: this.$route.params.stdwid
        }
        this.stdwdetails(stdawdetail)
        let data = {
            id: this.$route.params.id
        };
        this.builddetail(data);
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    /* margin-bottom: 20px; */
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>